<template>
  <div v-if="curTabData.type == sourceTypeObj.viewType" style="height: 100%">
    <source-view :source-data="curSourceData" />
  </div>
  <div v-if="curTabData.type == sourceTypeObj.jsType" style="height: 100%">
    <source-js />
  </div>
  <div v-if="curTabData.type == sourceTypeObj.sqlType" style="height: 100%">
    <source-sql :source-data="curSourceData" />
  </div>
  <div v-if="curTabData.type == sourceTypeObj.actionType" style="height: 100%">
    <source-action :source-data="curSourceData" />
  </div>
  <div v-if="curTabData.type == sourceTypeObj.serviceType" style="height: 100%">
    <source-service :source-data="curSourceData" />
  </div>
  <div v-if="curTabData.type == sourceTypeObj.tableType" style="height: 100%">
    <source-table :source-data="curSourceData" />
  </div>
</template>

<script>
  import { defineComponent, reactive, toRefs, onMounted, provide } from 'vue';
  import SourceView from '@/views/data-source/source-view/index.vue';
  import SourceJs from '@/views/data-source/source-js/index.vue';
  import SourceSql from '@/views/data-source/source-sql/index.vue';
  import SourceAction from '@/views/data-source/source-action/index.vue';
  import SourceService from '@/views/data-source/source-service/index.vue';
  import SourceTable from '@/views/data-source/source-table/index.vue';
  import { DataSource } from '@/views/data-source/model/data-source';
  import { SOURCE_DATA_LABEL, SOURCE_TYPE_ICON } from '@/helper/constant';

  export default defineComponent({
    name: 'SourceLayout',
    components: {
      SourceView,
      SourceJs,
      SourceSql,
      SourceAction,
      SourceService,
      SourceTable,
    },
    props: {
      tabData: {
        type: Object,
        default: () => null,
      },
    },
    setup(props) {
      const state = reactive({
        curTabData: props.tabData, //当前选项卡内容
        curSourceData: new DataSource(props.tabData),
        sourceTypeObj: SOURCE_TYPE_ICON, //数据源类型
      });
      provide(SOURCE_DATA_LABEL, new DataSource(props.tabData));
      onMounted(() => {});
      return {
        ...toRefs(state),
      };
    },
  });
</script>
<style scoped lang="less"></style>
